<template>
  <div class="evidencePage">
    <div v-if="showFather">
      <serch :formInline="formInline" :options='options' v-on:serchFormInline="serchFormInline" :name='name' :title='title'></serch>
      <div class="checkTable">
        <div class="ct_title">
          取证列表
        </div>
        <div class="ct_button">
          <el-button type="primary" @click="GoEvidenceadd" class="newAdd" icon="el-icon-plus">新建取证</el-button>
          <el-button @click="deleteLists" class="delate">批量删除</el-button>
        </div>
      </div>
      <div class="tableBox">
        <el-table
          ref="multipleTable"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            fixed
            width="55">
          </el-table-column>
          <el-table-column
            label="缩略图"
            min-width="100">
            <template slot-scope="scope">
              <img style="width:50px;height:50px" :src="scope.row.thumbnailPath" alt="" @click="showPreview(scope.$index, scope.row)">
            </template>
          </el-table-column>
          <el-table-column
            prop="forensicName"
            label="任务名称"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="detectionTime"
            label="监测耗时"
            min-width="120">
          </el-table-column>
          <el-table-column
            prop="forgeryProbability"
            label="塑造概率"
            show-overflow-tooltip
            min-width="80">
          </el-table-column>
          <el-table-column
            prop="programName"
            label="取证程序"
            show-overflow-tooltip
            min-width="120">
          </el-table-column>
          <el-table-column
            label="取证状态"
            show-overflow-tooltip
            min-width="80">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 3">
                成功
              </div>
              <div v-else-if="scope.row.status == 4">
                失败
              </div>
              <div v-else-if="scope.row.status == 1">
                待处理
              </div>
              <div v-else-if="scope.row.status == 2">
                处理中
                <i class="el-icon-loading"></i>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传时间"
            show-overflow-tooltip
            min-width="150">
          </el-table-column>
          <el-table-column
            label="操作"
            fixed="right"
            min-width="100">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 3">
                <el-button 
                  type="text"
                  @click="handleSee(scope.$index, scope.row)">取证报告</el-button>
              </div>
              <div v-else-if="scope.row.status == 4">
                <el-button 
                  type="text"
                  @click="handExecMould(scope.$index, scope.row)">重新取证</el-button>
              </div>
              <div v-else-if="scope.row.status == 1">
                <el-button 
                  type="text"
                  @click="handExecMould(scope.$index, scope.row)">执行</el-button>
              </div>
              <div v-else-if="scope.row.status == 2">
                <el-button 
                  type="text"
                  disabled>执行</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>


    <div class="previewShade" v-show="previewShade" @click="closePreviewShade"> 
      <i class="el-icon-close close" @click="closePreviewShade"></i>
    </div>
    <div class="previewShadeMain" v-show="previewShade">
      <video :src="previewSrc" v-if="type == 0" class="preview" controls/>
      <audio :src="previewSrc" alt="" v-else-if="type == 1" class="preview" controls/>
      <img :src="previewSrc" alt="" v-if="type == 2" class="preview" />
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import serch from '../../components/serch.vue'
import { getForensicList ,deleteForensicByIds ,getProgramList ,execForensic ,forensicGetStatus, getProgramAll} from '../../api/index'
export default {
  components:{
    serch
  },
  data(){
    return{
      name:'任务名称',
      title:'取证程序',
      token:'',
      //
      pageNum: 1,
      pageSize: 10,
      total:0,

      showFather:true,
      formInline: {
        fileName: '',
        mediaType: ''
      },
      tableData: [],
      options: [],
      currentPage:1,
      multipleSelection:[],
      previewShade:false,
      previewSrc:'',
      type:0,
    }
  },
  watch:{
    $route(){
      if(this.$route.path == '/home/evidence'){
        this.showFather = true
      }else if(this.$route.path == '/home/evidence/evidenceadd' || this.$route.path == '/home/evidence/EvidenceDetails'){
        this.showFather = false
      }
      this.init()
      this.token = sessionStorage.getItem('token')
    }
  },
  created(){
    if(this.$route.path == '/home/evidence'){
      this.showFather = true
    }else if(this.$route.path == '/home/evidence/evidenceadd' || this.$route.path == '/home/evidence/EvidenceDetails'){
      this.showFather = false
    }
  },
  mounted(){
    this.init()
    this.initOption()
  },
  methods:{
    init(){
      let pageNum = this.pageNum
      let pageSize = this.pageSize
      let forensicName = this.formInline.fileName
      let programId = this.formInline.mediaType
      let params = { pageNum, pageSize, forensicName, programId}
      getForensicList(params).then(res=>{
        if(res.data.message == 'success'){
          let re = res.data.data
          this.tableData = re.object
          this.total = re.count
        }
      })
    },
    initOption(){
      let programName = ""
      let programType = 2
      let status = 1
      let params = {programName, programType, status}
      getProgramAll(params).then(res=>{
        let re = res.data.data
        
        re.object.forEach((el,index)=>{
          this.options.push({
            value: el.id,
            label: el.programName
          })
        })
        
      })
    },
    serchFormInline(e) {
      this.pageNum = 1
      this.formInline.fileName = e.fileName
      this.formInline.mediaType = e.mediaType
      this.init()
    },
    handleSelectionChange(e){
      this.multipleSelection = e
    },
    GoEvidenceadd(){
      this.$router.push('/home/evidence/evidenceadd')
    },
    handleEdit(index,item){
    },
    handleSee(index,item){
      this.$router.push({
        path: '/home/evidence/EvidenceDetails',
        query: {
          id : item.id
        }
      })
    },
    handExecMould(index,el){
      let id = el.id
      let programId = el.programId
      let params = { id ,programId}
      execForensic(params).then(res=>{
        if(res.data.message == "success"){
          this.init()
          // 获取状态
          forensicGetStatus(params).then(re=>{
            if(re.data.message == "success"){
              this.init()
            }else{
              this.$message.error(re.data.message)
            }
          })
        }else{
          this.$message.error(res.data.message)
        }
      })
    },
    deleteLists(){
      let ids = []
      this.multipleSelection.forEach((res)=>{
        ids.push(res.id)
      })
      let params = { ids }
      if(this.multipleSelection.length == 0){
        this.$message.error('请先选选择需要删除的数据！');
      }else{
        this.$confirm('此操作将永久删除选中数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteForensicByIds(params).then(res=>{
            if(res.data.message == 'success'){
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.$refs.multipleTable.clearSelection();
              this.multipleSelection = []
              this.init()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });    
          this.$refs.multipleTable.clearSelection();
          this.multipleSelection = []      
        });
      }
    },
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.init()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.init()
    },
    showPreview(index,res){
      this.previewShade = true

      this.previewSrc = res.filePathParameters1
      let name = res.filePathParameters1.split('.')
      

      if(name[name.length - 1] == 'mp4'){
        this.type = 0
      }else if(name[name.length - 1] == 'wav'){
        this.type = 1
      }else if(name[name.length - 1] == 'jpg' || name[name.length - 1] == 'jpeg' || name[name.length - 1] == 'png'){
        this.type = 2
      }
    },
    closePreviewShade(){
      this.previewShade = false
      this.previewSrc = ''
    }
  }
}
</script>

<style lang='less' scoped>
.evidencePage{
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  background-color: #1D1F2C;
  height: calc(100vh - 108px);
  overflow: auto;
  .checkTable{
    background-color: #282C41;
    color: #fff;
    padding: 5px 15px;
    margin-top: 20px;
    border-left: 4px solid #04D4FF;
    background-image: url('../../assets/images/mouId/liang.png');
    background-repeat: no-repeat;
    background-size: contain ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .ct_title{
      font-size: 20px;
    }
    .ct_button{
      .newAdd{
        color: #63E9FF;
        border: 1px solid #00CEF0;
        background-color: rgba(49, 203, 236, 0.1400);
        border-radius: 2px;
      }
      .delate{
        background-color: transparent;
        border: 1px solid #fff;
        color: #fff;
        border-radius: 2px;
      }
    }
    
  }
  .tableBox{
    padding: 0 10px;
    background-color: #282C41;
    /deep/.el-table .el-table__cell {
      padding: 8px 0;
    }
    /deep/.el-table th.el-table__cell {
        background: #4F5367!important;
        color: #fff!important;
    }
    /deep/.el-table tr {
        background-color: #3C4052;
        color: #fff;
    }
    /deep/.el-table th.el-table__cell>.cell {
      border-right: 1px solid #fff;
      padding-left: 14px!important;
    }
    /deep/.el-table th.el-table__cell:last-child >.cell {
      border-right: 0;
    }
    /deep/.el-table th.el-table__cell:first-child >.cell {
      border-right: 0;
    }
    /deep/.el-table_body tr.hover_row>td.el-table_cell{
      background-color: red!important;
    }
    /deep/.el-button--text {
      color: #3FC1FF;
    }
    /deep/.el-table__body-wrapper {
      background-color: #3C4052;
    }
  }
  tbody tr:hover>td,/deep/ tbody tr.hover-row>td { background-color: rgba(63,193,255,0.2000) }
  .block{
    padding: 20px 0;
    background-color: #282C41;
    /deep/.el-pagination{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 15px;
    }
    /deep/.el-pagination__total {
      color: #fff;
    }
    /deep/.el-input__inner {
      color: #fff;
      background-color: transparent;
    }
    /deep/.el-pagination.is-background .el-pager li {
      margin: 0 5px;
      background-color: transparent;
      color: #fff;
      min-width: 30px;
      border-radius: 2px;
      border: 1px solid #fff;
    }

    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: rgba(5, 190, 223, 0.14);
      color: #00BEDF;
      border: 1px solid #00BEDF;
    }
    /deep/.btn-prev {
       background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.btn-next{
      background-color: transparent;
      color: #FFF;
      border: 1px solid #fff;
    }
    /deep/.el-pagination__jump {
      margin-left: 24px;
      font-weight: 400;
      color: #fff;
    }
    
  }
 .previewShade{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99;
    
    .close{
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 26px;
      background-color: #FFF;
      border-radius: 50%;
    }
  }

  .previewShadeMain{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) ;
    z-index: 100;
    .preview{
      
      max-width: 800px;
      max-height: 500px;
    }
  }
}
</style>